<template>
  <div class="eldan-nav">
    <uni-nav-bar fixed :title="props.title" @clickRight="clickMore" @clickLeft="goBack">
      <template #left>
        <i class="icon back"></i>
      </template>

      <template #right>
        <i v-if="props.showMore" class="icon more"></i>
      </template>
    </uni-nav-bar>
  </div>
</template>

<script setup>

import { onMounted } from 'vue'

const props = defineProps({
  title: {
    type: [Number, String],
    default: '导航栏'
  },
  showMore:{
    type:Boolean,
    default: true
  }
})

const emits = defineEmits(['onClickMore'])

const goBack = function() {
  uni.navigateBack({
    delta: 1
  })
}

const clickMore = function() {
  if(!props.showMore){
    return
  }
  emits('onClickMore')
}

onMounted(() => {

})
</script>

<style lang="scss" scoped>
.eldan-nav {
  margin-top: var(--status-bar-height);

  .uni-navbar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    &.back {
      background-image: url("/static/images/icon/back.png");
    }

    &.more {
      background-image: url("/static/images/icon/more-0.5x.png");
    }
  }

  .title {
    font-size: 16px;
    text-align: center;
  }
}
</style>
